import React from "react";
let canvas;
let ctx;

export default class CaptureCanvas extends React.Component{
     componentDidMount(){
       this.start(); 
    }
    start(){
        canvas = this.refs["canvas"]
        this.refs["video"].srcObject = canvas.captureStream(25);//25fps

        ctx = canvas.getContext("2d");
        ctx.fillStyle = "#000";
        ctx.fillRect(0,0,400,300);
        ctx.lineWidth = 2;
        ctx.strokeStyle="#ffcc00";


        canvas.addEventListener("mousedown",(event)=>{
            ctx.beginPath();
            ctx.moveTo(event.offsetX,event.offsetY)
            ctx.stroke();
            //添加移动事件
            canvas.addEventListener("mousemove",this.move);
        })

        canvas.addEventListener("mouseup",()=>{
            //移除移动事件
            canvas.removeEventListener("mousemove",this.move)
        })
    }

    move(event){
        ctx.lineTo(event.offsetX,event.offsetY);
        ctx.stroke();
    }

    render(){
        return(
            <div>
                <div><h3>本地</h3><canvas ref="canvas"></canvas></div>
                <div><h3>远程</h3><video ref="video" playsInline autoPlay></video></div>
            </div>
        );
    }
}